@csstools/postcss-nested-calc

What is @csstools/postcss-nested-calc?

@csstools/postcss-nested-calc is a PostCSS plugin that allows you to use nested calc() expressions in your CSS. This can simplify complex calculations and make your CSS more maintainable.

What are @csstools/postcss-nested-calc's main functionalities?

Nested calc() expressions

This feature allows you to nest calc() expressions within each other. The plugin will resolve these nested calculations into a single calc() expression.

/* Input CSS */
.example {
  width: calc(100% - calc(50px + 10px));
}

/* Output CSS */
.example {
  width: calc(100% - 60px);
}

Simplifying complex calculations

This feature simplifies complex calculations by resolving nested calc() expressions, making your CSS easier to read and maintain.

/* Input CSS */
.example {
  height: calc(100vh - calc(2 * 20px + 10px));
}

/* Output CSS */
.example {
  height: calc(100vh - 50px);
}

Other packages similar to @csstools/postcss-nested-calc

postcss-calc

postcss-calc is another PostCSS plugin that reduces calc() references whenever it's possible. It can handle simple calculations but does not support nested calc() expressions as @csstools/postcss-nested-calc does.

postcss-advanced-variables

postcss-advanced-variables is a PostCSS plugin that allows you to use Sass-like variables, conditionals, and loops in your CSS. While it offers more advanced features, it does not specifically focus on nested calc() expressions like @csstools/postcss-nested-calc.

README

PostCSS Nested Calc

PostCSS Nested Calc lets you use nested calc() expressions following the CSS Values and Units 4 specification.

.example {
	order: calc(1 + calc(2 * 2));
}

/* becomes */

.example {
	order: calc(1 + (2 * 2));
	order: calc(1 + calc(2 * 2));
}

Usage

Add PostCSS Nested Calc to your project:

npm install postcss @csstools/postcss-nested-calc --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssNestedCalc = require('@csstools/postcss-nested-calc');

postcss([
	postcssNestedCalc(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Nested Calc runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

Options

preserve

The preserve option determines whether the original notation is preserved. By default the original values are preserved.

postcssNestedCalc({ preserve: false })

.example {
	order: calc(1 + calc(2 * 2));
}

/* becomes */

.example {
	order: calc(1 + (2 * 2));
}